.container {
  @apply h-full text-xs text-t-primary;
  display: grid;
  grid-template: 'list content';
  grid-template-columns: 250px 1fr;
  grid-template-rows: 1fr;

  div {
    &.list {
      @apply overflow-y-auto bg-secondary rounded-lg;
      grid-area: list;
  
      a {
        @apply cursor-pointer border-b border-divider block; 

        > div {
          @apply flex items-center gap-1 my-1 mx-1 px-1 hover:bg-secondary;
          padding-top: 6px;
          padding-bottom: 6px;

          .date {
            @apply text-gray-300;
          }
        }

        &.active {
          > div {
            @apply bg-active text-t-active rounded-sm border-b-0;
          }

          .delete_icon {
            @apply cursor-pointer hidden opacity-100;
          }
        }

        &:hover > div {
          @apply bg-hover text-t-active;
        }

        .delete_icon {
          @apply cursor-pointer hidden;
        }

        &:hover {
          .date {
            @apply hidden;
          }
          .delete_icon {
            @apply inline-block float-right;
          }
        }
      }
    }
    &.content {
      @apply ml-2 bg-secondary rounded-lg overflow-hidden;
      grid-area: content;
    }
  }
}